<template>
    <div>
         <!--导航-->
        <div class="rotation-tab">
            <ul>
                <li v-for="(item,index) in tablist" :key="index" @click="torouter(item.to)">{{item.name}}
                    <span class="iconfont icon-xiangshang" v-if="index==4"></span>
                </li>
            </ul>
        </div>
        <div class="details">
            <div></div>
            <div>
                <div>
                    <div>
                        <span>首页/SHOWROOM/</span><span>GHT HJHJKHK</span>
                    </div>
                    <div>
                        <div>
                            <img src="../assets/img/SOSC6.png" alt="">
                            <img src="../assets/img/SOSC6.png" alt="">
                        </div>
                        <div>
                            <h3>GHT HJHJKHK</h3>
                            <div class="tilte">
                                设计师:
                                <span> Cyd Beard</span>
                            </div>
                            <div class="cont">
                               自2007品牌成立以来，FINDERS KEEPERS致力于营造出一种不经意的性感美学。
                                从简洁的派对裙装，到热门的必备款，设计师希望打造出一个可以穿去任何场合的。
                                每个款式都有自己独特的有趣，
                                极富情调的小细节，忠于品牌格调。
                                FINDERS KEEPERS女孩寻求生活中的探险，
                                热衷追求新鲜事物。
                                以自己的节奏，独立自主的生活。
                                她是一个自由的灵魂，
                                过着时髦且热烈的生活。
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div v-for="(item,index) in 12" :key="index">
                        <img src="../assets/img/SOSC6.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tablist:[
            {
                name:'首页',
                to: '/'
            },
            {
                name:'MAXSOO线上旗舰店',
                to: '/flagshipstore'
            },
            {
                name:'关于我们',
                to: '/about'
            },
            {
                name:'合作伙伴',
                to: '/partners'
            },
            {
                name:'SHOWROOM',
                to: '/showroom'
            }]
        }
    },
    methods: {
        torouter(page) {
            this.$router.push({
                path: page
            })
        }
    }
}
</script>

<style lang="scss">
.rotation-tab {
    position: absolute;
    top: 78px;
    left: 50%;
    margin-left: -307px;
    z-index: 4;
    >ul {
        width: 100%;
        overflow: hidden;
        >li {
            float: left;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            margin: 0 25px;
            cursor: pointer;
            position: relative;
            >span {
                font-size: 14px;
                position: absolute;
                bottom: -16px;
                left: 50%;
                margin-left: -7px;
            }
        }
    }
}
.details {
    width: 100%;
    // margin: 0 auto;
    >div:nth-child(1) {
        width: 100%;
        height: 165px;
        background: #000;
    }
    >div:nth-child(2) {
        width: 1250px;
        padding-top: 45px;
        padding-bottom: 463px;
        >div:nth-child(1) {
            width: 1122px;
            padding-bottom: 38px;
            >div:nth-child(1) {
                font-size: 14px;
                color: #101010;
                >span:nth-child(1) {
                    font-weight: 600;
                }
            }
            >div:nth-child(2) {
                overflow: hidden;
                >div:nth-child(1) {
                    float: left;
                    position: relative;
                    >img:nth-child(1) {
                        width: 338px;
                        height: 475px;
                        vertical-align: top;
                    }
                    >img:nth-child(2) {
                        width: 268px;
                        height: 402px;
                        position: absolute;
                        left: 318px;
                        bottom: 0;
                    }
                }
                >div:nth-child(2) {
                    float: right;
                    >h3 {
                        font-size: 48px;
                        color: #101010;
                    }
                    >.tilte {
                        font-size: 28px;
                        width: 291px;
                        height: 53px;
                        line-height: 53px;
                        text-align: center;
                        color: #101010;
                        background: #eee;
                        margin-top: 51px;
                        margin-left: 0;
                        >span {
                            font-weight: 600;
                        }
                    }
                    >.cont {
                        margin-top: 21px;
                        width: 518px;
                        font-size: 14px;
                        color: #101010;
                        text-align: left;
                        line-height: 30px;
                    }
                }
            }
        }
        >div:nth-child(2) {
            margin-top: 67px;
            overflow: hidden;
            >div {
                width: 265px;
                height: 360px;
                float: left;
                margin: 0 23px;
                padding-top: 48px;
                >img {
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                }
            }
        }
    }
}
</style>